<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>创新智能-纤丝慧索</title>
    <style>
        body,
        html {
            height: 100%;
            margin: 0;
            display: flex;
            justify-content: center;
            /* 只在主轴（水平）上居中 */
            align-items: center;
            /* 但在交叉轴（垂直）上，这实际上对于body/html不起作用，因为我们需要内容垂直居中*/
            font-family: Arial, sans-serif;
        }

        .content-wrapper {
            display: flex;
            flex-direction: column;
            /* 垂直排列子元素 */
            align-items: center;
            /* 使子元素在交叉轴（现在是垂直轴）上居中 */
            justify-content: flex-start;
            /* 图片从顶部开始 */
            width: 100%;
            /* 如果需要，设置最大宽度 */
            text-align: center;
            /* 对于非flex子元素，如果需要的话 */
            padding-bottom: 20px;
            /* 可选，为按钮下方留出空间 */
        }

        .header-image {
            max-width: 100%;
            /* 限制图片的最大宽度 */
            height: auto;
            /* 保持图片的原始宽高比 */
            /* margin-right: 20px; 移除，因为不再需要为文字留出空间 */
        }

        .button {
            /* 宽度可以保留或根据需要调整 */
            /* 由于是flex子元素且align-items: center;已经应用，按钮将垂直居中 */
            /* 其他样式保持不变 */
            background-color: #4CAF50;
            /* Green */
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
        }

        /* .button:hover 样式保持不变 */
    </style>
</head>

<body>
    <div class="content-wrapper">
        <img src="{{ url_for('static', filename='images/A12.png') }}" alt="A12" class="header-image">

    </div>
</body>

</html>